<template>
	<div class="footer">
		<div class="container">
			<div class="siteinfo">
				<div class="bot_img">
          <a href="#" target="_blank"><img src="/static/images/footer/2743ce4ac9b85d.png" /></a>
          <a href="#" target="_blank"><img src="/static/images/footer/27459818556a7e.png" /></a>
          <a href="#" target="_blank"><img src="/static/images/footer/27459949c34309.png" /></a>
          <a href="#" target="_blank"><img src="/static/images/footer/2745cee3314993.png" /></a>
          <a href="#" target="_blank"><img src="/static/images/footer/2745cf85d5d06c.png" /></a>
          <a href="#" target="_blank"><img src="/static/images/footer/2743c5d109f377.png" /></a>
				</div>
			</div>

			<div class="copyright">
        <h4 class="content-c2">Copyright Reserved  2012-2035 版权所有 ICP证：<a href="https://beian.miit.gov.cn/" target="_blank">沪ICP备20001235号-2 </a>（上海资东科技有限公司，提供技术支持服务）</h4>
				<!--
				<ul class="privacy">
					<li class="content-c1">
						<a class="content-c0" @click="open1">商户后台</a>
					</li>
				</ul>
				-->
			</div>
		<!--	<div class="cop">
				<a class="content-c3">
					<span class="content-c3">沪ICP备20001235号-2</span>
					<span class="content-c3">无忧账号（www.5u258.com）</span>
				</a>
			</div>-->
			<!--<div class="footer-jszc">
				<span class="jszc-text" @mouseover="show()">-技术支持:资东科技</span>
				<div class="jszc-info" :class="isShowJSZC ? 'show':'hide'" @mouseover="show()" @mouseout="hide()">
					<div class="jszc-title">技术合作</div>
					<div class="jszc-content">
						<div class="j-c-left">
							<img src="../../static/images/bg/cli_300px.png" />
						</div>
						<div class="j-c-right">
							<p class="j-c-text">电话：18217063795</p>
							<p class="j-c-text">微信: jackyu001</p>
						</div>
					</div>
				</div>
			</div>-->
		</div>
	</div>
</template>
<script>
	import YButton from '/components/YButton'
	export default {
		data() {
			return {
				isShowJSZC: false
			}
		},
		methods: {
			show() {
				this.isShowJSZC = true;
			},
			hide() {
				this.isShowJSZC = false;
			}
		},
		components: {
			YButton
		}
	}
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
	.footer {
		border-top: 1px solid #e6e6e6;
		background: #fafafa;
		margin-top: 60px;
		height: 250px;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-left: 20%;
	}

	.container {
		width: 1220px;
	}

	.siteinfo {
		height: 100px;
		padding: 35px 0 130px;
		border-bottom: 1px solid #e6e6e6;
		position: relative;
	}

	.c0 {
		width: 149px;
		line-height: 1;
		float: left;
	}

	.c1 {
		color: #646464;
		font-size: 12px;
		padding: 0 0 14px;
	}

	.c2 {
		color: #c3c3c3;
		font-size: 12px;
		padding: 6px 0;
	}

	.c3 {
		color: #969696;
	}

	.c4 {
		position: absolute;
		right: 0;
		overflow: hidden;
		line-height: 34px;
	}

	.c5 {
		color: #646464;
		right: -70px;
		position: relative;
	}

	.copyright {
		color: #434d55;
		font-size: 12px;
		padding: 20px 0 0;
		display: flex;
		align-items: left;
	}

	.privacy {
		float: left;
		margin: 0 0 0 12px;
	}

	.content-c0 {
		color: #5079d9;
		cursor: pointer;
		text-decoration: none;
		&:hover {
			color: #3A5FCD;
		}
	}

	.content-c1 {
		float: left;
		line-height: 12px;
		padding: 1px 10px 0;
		border-left: 1px solid #ccc;
	}

	.content-c2 {
		float: left;
		height: 15px;
		line-height: 15px;
		color: #757575;
	}

	.cop {
		clear: both;
		padding: 10px 0 0;
		height: 15px;
	}

	.content-c3 {
		margin-right: 20px;
		color: #bdbdbd;
		font-size: 12px;
		height: 12px;
		line-height: 1;
	}

	.bot_img {
		position: absolute;
		bottom: 20px;
	}

	.footer-jszc {
		width: 200px;
		height: 20px;
		position: absolute;
		right: 300px;
		margin-top: -10px;
	}

	.jszc-text:hover {
		cursor: pointer;
		color: #FF8700;
	}

	.jszc-info {
		position: absolute;
		width: 250px;
		height: 135px;
		top: -140px;
		right: 0;
		border-radius: 5px;
		border: 2px solid #FF8700;
	}

	.jszc-title {
		width: 100%;
		height: 30px;
		background-color: #FF8700;
		color: white;
		text-align: center;
		line-height: 30px;
		font-weight: bold;
		border-top-left-radius: 2px;
		border-top-right-radius: 2px;
	}

	.jszc-content {
		width: 100%;
		height: 100px;
		display: flex;
		flex-direction: row;
	}

	.j-c-left {
		position: relative;
		width: 100px;
		height: 100%;
	}

	.j-c-left img {
		width: 100%;
		height: 100%;
	}

	.j-c-right {
		padding-top: 20px;
	}

	.j-c-text {
		margin-bottom: 10px;
	}

	.j-c-text:hover {
		cursor: pointer;
		color: #FF8700;
	}

	.jszc-info.show {
		animation: show .5s forwards;
	}

	.jszc-info.hide {
		visibility: visible;
		opacity: 1;
		transform: translateX(0);
		animation: hide .5s forwards;
	}

	@keyframes show {
		to {
			visibility: visible;
			opacity: 1;
			transform: translateX(0)
		}
	}

	@keyframes hide {
		to {
			visibility: hidden;
			opacity: 0;
			transform: translateX(-100px)
		}
	}
</style>
